<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>修改学生</title>
</head>

<body>
<div id="app">
    <main class="container">
        <form style="margin-top: 32px">
            <fieldset>
                <label>
                    学生姓名
                    <input name="name" v-model="name" />
                </label>

                <label>
                    学号
                    <input name="code" v-model="code" />
                </label>

                <label>
                    班级
                    <select v-model="classId">
                        <option v-for="(item, index) in classgroups" :key="item.id" :value="item.id">
                            {{ item.name }}
                        </option>
                    </select>
                </label>

                <label>
                    备注
                    <input name="remark" v-model="remark" />
                </label>
            </fieldset>

            <button @click.prevent="doUpdate" :disabled="!canClick">修改</button>
            <div style="color: rgb(0, 137, 90); display: inline-block; margin-left: 24px" v-if="displaySuccess">
                操作成功，即将返回
            </div>
        </form>
    </main>
</div>

<script>
    const App = {
        data() {
            return {
                id: null,
                name: "",               // 学生姓名
                code: "",               // 学号
                classId: null,       // 班级ID
                remark: "",             // 备注
                classgroups: [],        // 班级列表
                canClick: false,        // 提交按钮是否可用
                displaySuccess: false,  // 显示操作成功信息
            };
        },

        methods: {
            init() {
                const queryString = window.location.search;
                const urlParams = new URLSearchParams(queryString);
                const id = urlParams.get('id');

                this.canClick = false;
                const vueInstance = this;
                let finishedTasks = 0;
                if (id == null) {
                    console.log("URL中没有id： ", window.location.href);
                } else {
                    // 取得当前要修改的记录
                    const url = "/students/" + id;
                    axios.get(url).then(function(response) {
                        console.log("响应的状态码：", response.status);
                        console.log("响应的数据：", JSON.stringify(response.data));

                        if (response.status == 200 && response.data.code === 200 && response.data.data.rows != null) {
                            const stuDent = response.data.data.rows[0].student;
                            vueInstance.id = stuDent.id;
                            vueInstance.name = stuDent.name;
                            vueInstance.code = stuDent.code;
                            vueInstance.classId =response.data.data.rows[0].classgroup.id;
                            vueInstance.remark = stuDent.remark;
                            finishedTasks++;
                        } else {
                            console.log("后端代码出错了，检查后端log");
                        }
                    }).catch(function(error) {
                        console.log("获取学生信息出错：", error);
                    });
                }

                // 取得班级列表
                const url = "/classgroups";
                axios.get(url).then(function(response) {
                    console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

                    if (response.status == 200 && response.data != null && response.data.code === 200 && response.data.data.rows != null) {
                        vueInstance.classgroups = response.data.data.rows.map(item => ({
                            id: item.classgroup.id,
                            name: item.classgroup.name,
                        }));
                        finishedTasks++;
                        if (finishedTasks == 2) {
                            vueInstance.canClick = true;
                        }
                    } else {
                        console.log("后端代码出错了，检查后端log");
                    }
                })
                    .catch(function(error) {
                    console.log("获取班级列表出错：", error);
                });
            },

            doUpdate() {
                const url = "/students";
                const formData = {
                    id: this.id,
                    name: this.name,
                    code: this.code,
                    classId: this.classId,
                    remark: this.remark,
                };

                this.canClick = false;
                const vueInstance = this;

                // PUT 请求更新学生信息
                axios.put(url, formData).then(function(response) {
                    console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

                    if (response.status == 200 && response.data.code === 200) {
                        vueInstance.displaySuccess = true;

                        // 1秒后跳转到学生列表页面
                        window.setTimeout(() => {
                            window.location.href = "/student-list.html";
                        }, 1000);
                    } else {
                        console.log("后端代码出错了，检查后端log");
                    }
                }).catch(function(error) {
                    console.log("访问出错了：", error);
                    console.log("地址：", url);
                    console.log("数据：", formData);
                });
            }
        },

        mounted() {
            this.init();
        }
    };

    const app = Vue.createApp(App);
    app.mount("#app");
</script>

</body>
</html>
